<template>
  <view class="container">
    <!-- 顶部标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: true }"
      >
        挂号预约
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 预约挂号订单 -->
      <view class="order-list">
        <order-item 
          v-for="(item, index) in registrationOrders" 
          :key="item.id" 
          :order="item" 
          :type="0"
          @cancel="handleCancel(item.id)"
          @complete="handleComplete(item.id)"
        />
      </view>
      
      <!-- 空状态 -->
      <view v-if="registrationOrders.length === 0 && !loading" class="empty-state">
        <text class="iconfont icon-empty"></text>
        <text class="empty-text">暂无相关预约订单</text>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <text class="iconfont icon-loading"></text>
        <text class="loading-text">正在加载订单...</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/index.js' // 导入API模块
// 引入订单组件
import OrderItem from '@/components/OrderItem/OrderItem.vue';
// 引入请求工具
import request from '@/utils/request.js';

// 在script部分导入API
export default {
  components: {
    OrderItem
  },
  data() {
    return {
      // 挂号预约订单
      registrationOrders: [],
      // 加载状态
      loading: false
    };
  },

  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 获取订单列表
    async fetchOrderList() {
      this.loading = true;
      try {
        // 使用封装的API方法
        const res = await api.getVaccineAppointments();
        if (res.code === 200) this.registrationOrders = res.data.filter(order => order.status === 1)
      } catch (error) {
        console.error('获取订单列表失败:', error);
        uni.showToast({
          title: '获取订单列表失败',
          icon: 'none'
        });
        this.registrationOrders = [];
      } finally {
        this.loading = false;
      }
    },
    
    // 处理取消预约
    async handleCancel(id) {
      const that = this; // 保存this引用
      // 二次确认
      uni.showModal({
        title: '取消警告',
        content: '取消预约后数据不在恢复',
        async success(res) {
          if (res.confirm) {
            try {
              // 使用改进的API接口，它有内置的错误处理和回退机制
              const result = await api.cancelVaccineAppointment(id);
              
              if (result.code === 200) {
                // 从列表中移除该订单（因为我们只显示预约中的订单）
                that.registrationOrders = that.registrationOrders.filter(order => order.id !== id);
                uni.showToast({
                  title: '已取消预约',
                  icon: 'success'
                });
              } else {
                // API调用返回了非200状态码，显示错误信息
                uni.showToast({
                  title: result.message || '取消预约失败',
                  icon: 'none'
                });
              }
            } catch (error) {
              console.error('取消预约失败:', error);
                // 只在API调用成功时才更新订单状态
                // 失败时显示错误提示，保持订单列表不变
                uni.showToast({
                  title: '取消预约失败，请稍后重试',
                  icon: 'none'
                });
            }
          }
        },
        fail() {
          uni.showToast({
            title: '取消操作已取消',
            icon: 'none'
          });
        }
      });
    },
    
    // 处理完成预约
    async handleComplete(id) {
      const that = this; // 保存this引用
      try {
        // 二次确认
        uni.showModal({
          title: '再次确认',
          content: '确认后不可更改',
          async success(resModal) {
            if (resModal.confirm) {
              try {
                // 使用改进的API接口，它有内置的错误处理和回退机制
                const result = await api.completeVaccineAppointment(id);
                
                if (result.code === 200) {
                  // 从列表中移除该订单（因为我们只显示预约中的订单）
                  that.registrationOrders = that.registrationOrders.filter(order => order.id !== id);
                  uni.showToast({
                    title: '已标记为完成',
                    icon: 'success'
                  });
                } else {
                  // API调用返回了非200状态码，显示错误信息
                  uni.showToast({
                    title: result.message || '标记完成失败',
                    icon: 'none'
                  });
                }
              } catch (error) {
                console.error('标记完成失败:', error);
                  // 只在API调用成功时才更新订单状态
                  // 失败时显示错误提示，保持订单列表不变
                  uni.showToast({
                    title: '标记完成失败，请稍后重试',
                    icon: 'none'
                  });
              }
            }
          }
        });
      } catch (error) {
        console.error('标记完成失败:', error);
      }
    },
    onLoad() {
     
    // 页面加载时获取订单数据
    this.fetchOrderList();
  },
  }
}

</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.right-actions {
  display: flex;
  width: 120rpx;
  justify-content: space-between;
}

/* 标签栏样式 */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  white-space: nowrap;
}

.tab-item {
  flex: 1;
  padding: 25rpx 0;
  text-align: center;
  font-size: 28rpx;
  position: relative;
}

.tab-item.active {
  color: #07c160;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50rpx;
  height: 4rpx;
  background-color: #07c160;
  border-radius: 2rpx;
}

/* 内容区域样式 */
.content {
  padding: 20rpx;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
}

.empty-state .iconfont {
  font-size: 100rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
}

.loading-state .iconfont {
  font-size: 100rpx;
  margin-bottom: 30rpx;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>